<template>
  <div>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label" v-text="title ? title :'添加附件 (可多个)'"></div>
          <div class="item-input-wrap">
            <div class="block block-strong knowledge-repo-range-box">
              <div
                class="chip"
                v-if="accessory.length>0"
                v-for="el in accessory"
                :key="el.id"
                @click="downloadAccessoryFile(el)"
              >
                <div class="chip-label" v-text="el.name"></div>
                <a href="#" class="chip-delete" @click.stop.prevent="deleteFile(el.id)"></a>
              </div>
              <div
                class="chip add-box"
                v-if="!maximum || accessory.length == 0 || accessory.length != maximum"
              >
                <div class="chip-media knowledge-repo-add-box">
                  <i class="f7-icons">add</i>
                  <input
                    type="file"
                    name="file"
                    :accept="inputAccept ? inputAccept : '*'"
                    class="knowledge-repo-add-input"
                    :id="inputElId"
                    @change="addFile"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </div>
</template>

<script>
import Http from "../../js/mod.http";
import ToastUtils from "../../mod/utils.toast";
import strings from "../../assets/strings";
import Utils from "../../js/mod.utils";

export default {
  props: [
    "accessory",
    "title",
    "inputElId",
    "onlyMedia",
    "maximum",
    "inputAccept"
  ],
  data() {
    return {};
  },
  created: function() {
    let _this = this;
  },
  methods: {
    addFile: function() {
      let _this = this;
      let inputObj = document.getElementById(_this.inputElId);
      let fileObj = inputObj.files[0];
      // console.log('file object : ', fileObj);
      if (typeof fileObj == "undefined" || fileObj.size <= 0) {
        ToastUtils.toast.show(
          ToastUtils.param.toast({ text: strings.toast["not-null"].image })
        );
        return;
      }
      _this.$emit("uploading", true);
      let fileName = fileObj.name;
      let fileTypeStr = fileObj.type;
      let fileTypeArr = fileTypeStr.split("/");
      let fileType = fileTypeArr[0].trim();
      let to_url = "";
      if (fileType == "image") {
        to_url = Http.kInterfacePath.file.upload;
      } else {
        to_url = Http.kInterfacePath.file.uploadFile;
      }
      let formFile = new FormData();
      formFile.append("action", "UploadVMKImagePath");
      formFile.append("file", fileObj); //加入文件对象
      let data = formFile;
      let _errorFileUpload = err => {
        _this.$emit("uploading", false);
        Http.httpErrorDeal(_this, err);
      };
      let params = {
        url: to_url,
        type: Http.httpType.post,
        data: data,
        success: _successFileUpload,
        error: _errorFileUpload
      };
      Http.ajax(_this, params);

      function _successFileUpload(res) {
        _this.$emit("uploading", false);
        let resData = res.data ? res.data : null;
        if (resData != undefined && resData != null && resData != "") {
          let item = {
            id: resData.id,
            url: resData.url,
            name: resData.name ? resData.name : fileName,
            thumb: resData.thumb ? resData.thumb : ""
          };
          let beforeAccessoryArr = _this.accessory;
          beforeAccessoryArr.push(item);
          let afterIds = beforeAccessoryArr.map(function(item) {
            return item.id;
          });
          let emitData = {
            accessory: beforeAccessoryArr,
            accessoryIds: afterIds
          };
          _this.$emit("changeAccessory", emitData);
        }
      }
    },
    deleteFile: function(idname) {
      let _this = this;
      let beforeAccessoryArr = _this.accessory;
      let afterAccessoryArr = [];
      let afterIds = [];
      for (let i in beforeAccessoryArr) {
        if (idname != beforeAccessoryArr[i].id) {
          afterAccessoryArr.push(beforeAccessoryArr[i]);
          afterIds.push(beforeAccessoryArr[i].id);
        }
      }
      let emitData = {
        accessory: afterAccessoryArr,
        accessoryIds: afterIds
      };
      _this.$emit("changeAccessory", emitData);
    },
    downloadAccessoryFile(item) {
      let _this = this;
      var name = el.name;
      var url = el.url;
      if (name && url) {
        //Utils.tipDownloadFile(url, name);
      }
    }
  }
};
</script>

<style scoped>
</style>
